<template>
	<view>
		<view v-if='hasLong'>
			<view class="no-warpper" v-if='hasInfo'>
				<scroll-view scroll-y='true' class="scroll-box" @scrolltolower='onBottom'>
					<view class="nl-shadow-box m10" v-for="(item,index) in details " :key='item.isId'>
						<view class="nl-flex-list">
							<text>{{item.itDescribe}}</text>
							<view class="right-grey">{{item.create_time}}</view>
						</view>
						<view class="nl-flex-list">
							<view class="feedback-content">
								<view class="feedback-item">
									<view>反馈小区 :</view>
									<view>{{item.communityName}}</view>
								</view>
								<view class="feedback-item">
									<view>反馈内容 :</view>
									<view>{{item.isDetails}}。</view>
								</view>
							</view>
						</view>
						<view class="nl-flex-list" style="float: right;min-height: 80rpx;">
							<view class="button-mini line m8" @click="goToDetail(item)">
								<button>详情</button>
							</view>
						</view>
					</view>

					<u-loadmore :status="status" />

					<view class="add-icon" @click="addFeedback">
						<u-icon name="plus" color="#ffffff" size="40" class="icon"></u-icon>
					</view>
				</scroll-view>
			</view>
			
			<!-- 无内容 -->
			<view v-if="hasInfo == false">
				<noData></noData>
			</view>
		</view>

		<!-- 无网络 -->
		<view v-else>
			<netError  v-if='!hasNet' @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {
		listDetailsByUserId
	} from '@/api/feedback.js'
	import {
		mapState,
		userCommunity
	} from 'vuex'
	export default {
		data() {
			return {
				page: 1,
				records: 0,
				status: 'loadmore',
				listBox: [], // 避免上拉刷新时，页面出现空白
				details: [], //问题列表
				hasLong:false,//加载是否完成
				hasNet: true, //有无网络
				hasInfo: false, //有无内容
			}
		},
		computed: {
			...mapState('user', ['userId', 'userCommunity'])
		},
		onShow() {
			this.page = 1,
			this.records = 0
			this.listBox = []
			this.getListDetails(1)
		},
		methods: {
			//获取问题列表
			getListDetails(page) {
				let that = this
				let data = {
					// userId: this.userId,
					communityId:this.userCommunity.communityId,
					row: 10,
					page: page
				}
				listDetailsByUserId(data).then(res => {
					that.records = res.records
					if (that.records == that.page) {
						that.status = 'nomore'
					} else {
						that.status = 'loadmore'
					}
					that.page++
					uni.stopPullDownRefresh()
					for (let i of res.details) {
						that.listBox.push(i)
						}	
					that.details = that.listBox
					that.hasLong=true
					if(res.details.length===0){
						that.hasInfo = false
					}else{
						that.hasInfo = true
					}
					that.hasNet = true
					console.log(res)
				}).catch(err => {
					uni.stopPullDownRefresh()
					that.hasNet = false
					that.hasInfo = false
					that.hasLong = false
				})

			},
			//跳转添加问题
			addFeedback() {
				uni.navigateTo({
					url: './addProblem/addProblem'
				})
			},
			//跳转详情
			goToDetail(item) {
				uni.navigateTo({
					url: `./problemDetail/problemDetail?create_time=${item.create_time}
					&itDescribe=${item.itDescribe}
					&isDetails=${item.isDetails}`
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getListDetails(1)
			},
			//触底
			onBottom() {
				// console.log('触底,当前page:',this.page)
				if (this.status == 'loading') { // 防止多次触发

				} else {
					this.status = 'loading';
					if (this.page <= this.records) {
						this.getListDetails(this.page)
					} else {
						this.status = 'nomore';
					}
				}

			},
			/**
			 * 刷新
			 */
			refresh:function(){
				this.page = 1
				this.records = 0
				this.listBox = []
				this.getListDetails(1)
			}
		}
	}
</script>

<style lang="scss">
	.feedback-content {
		width: 100%;
		background-color: #F3F9FF;
		padding: 24rpx;
		border-radius: 8rpx;

		.feedback-item {
			display: flex;

			view:nth-child(1) {
				width: 140rpx;
				color: $nl-text-color-grey;
			}

			view:nth-child(2) {
				flex: 1;
			}
		}
	}

	.m10 {
		margin-bottom: 32rpx;
	}

	.add-icon {
		position: fixed;
		right: 0;
		bottom: 114rpx;
		width: 48px;
		height: 38px;
		background: #1585FC;
		box-shadow: 0px 2px 10px 0px rgba(21, 133, 252, 0.5);
		border-radius: 100px 0px 0px 100px;

		.icon {
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.scroll-box {
		width: 100%;
		height: 95vh;
	}
</style>
